
<%--
  Created by IntelliJ IDEA.
  User: 你好
  Date: 2024/9/2
  Time: 20:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<script src="js/jquery-3.7.1.js"></script>
<script>
    var name = "<%=request.getParameter("name")%>";
    var id = "<%=request.getParameter("id")%>";

    $(function () {
        $.getJSON('transtfeServlet', show)

        $("#add").change(function () {
            var sname = $("#add").val();
            $.getJSON("transtfeServlet", function (data) {
                $.each(data, function (index, v) {
                    if (v.id.toString() === sname) {
                                $("input[name='shokahao']").val(v.cardnumber);
                    }
                })
            })
        })
    })
var names=[]
    function show(data) {
        names=data
        $(data).each(function (index, v) {
            if (v.name !== name) {
                console.log(index, v);
                let tr = $("<option value='" + v.id + "'>" + v.name + "</option>");
                $("#add").append(tr);
            }
        })
    }

    function submit() {
        let formdata = $('#reset').serializeArray(); // 获取表单数据
        let name1=names.find(item=>item.id===Number(document.querySelector("select").value))
        let xlk =name1.name; // 获取某个输入框的值

        // 将 formdata 数组转换为一个查询字符串
        let queryString = $.param(formdata);
        // 使用 $.ajax() 发送 POST 请求（如果服务器期望 POST）
        // 注意：如果服务器期望 GET 请求，并且能处理 formdata 作为查询字符串的一部分，
        // 那么您可以将 type 改为 'GET'，但通常不建议在 GET 请求中发送大量数据
        $.ajax({
            url: "add", // 服务器端点
            type: "get", // 请求类型，根据您的服务器要求更改为 'GET' 或 'POST'
            data: queryString + "&xlk=" + encodeURIComponent(xlk), // 发送的数据
            dataType: "json", // 预期服务器返回的数据类型
            success: function(data) {
                if (data > 0) {
                    console.log("开始调用接口提交");
                    alert("提交成功！");
                    console.log('AJAX 请求成功');
                    window.location.href = 'index.jsp'; // 跳转到另一个页面
                }
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.error("AJAX 请求失败: " + textStatus, errorThrown);
            }
        });
    }


</script>
<body>

<form id="reset">
    付款姓名： <input type="text" value="<%=request.getParameter("name")%>" name="names">
    收款人姓名:<select name="shoname" id="add">
    <option value="0">请选择</option>
</select> <br>
    收款者银行卡号：<input type="text" name="shokahao">
    转账金额：<input type="text" name="amount">
</form>
<button id="tj" ONCLICK="submit()">提交</button>
<button id="cz">重置</button>
</body>
</html>
